<template>
	<view>
		<download-btn :dwnSrc="dwnSrc"></download-btn>
		<GlobalSlot>
			<view slot="funcExampleDetail" class="content-box">
				<!-- :upColor="topColor" :downColor="belowColor" -->
				<jkCalendar
					:sendYear="toYear" :sendMonth="toMonth"
					:dataSource="signData" :ifrepair="true"
					:ifcancel = "true"
					@dateChange="getData" @clickChange="clickSign"
					@clickCancel = "cancel">
				</jkCalendar>
			</view>
			<view slot="funcIntroDetail">
				<p><label class="iconfont icon-pass"> </label>日历打卡组件主要用于活动进行期间每日打卡记录赚取积分等类似场景</p>
				<p><label class="iconfont icon-pass"> </label>自定义输入年月</p>
				<p><label class="iconfont icon-pass"> </label>自定义是否开启补签功能</p>
				<p><label class="iconfont icon-pass"> </label>自定义是否开启取消签到功能</p>
				<p><label class="iconfont icon-pass"> </label>根据主题修改默认渐变颜色</p>
			</view>
			<view slot="paramDetail">
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">sendYear</view>
					<view class="col2">年</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">当前年份</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">sendMonth</view>
					<view class="col2">月</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">当前月份</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">dataSource</view>
					<view class="col2">所选月份打卡数据</view>
					<view class="col3">Array</view>
					<view class="col4">--</view>
					<view class="col5">[]</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">ifrepair</view>
					<view class="col2">是否开启补签功能</view>
					<view class="col3">Boolean</view>
					<view class="col4">true|false</view>
					<view class="col5">true</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">ifcancel</view>
					<view class="col2">是否开启取消签到功能</view>
					<view class="col3">Boolean</view>
					<view class="col4">true|false</view>
					<view class="col5">true</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">upColor</view>
					<view class="col2">渐变颜色（上）</view>
					<view class="col3">String</view>
					<view class="col4">--</view>
					<view class="col5">#74AADA</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">downColor</view>
					<view class="col2">渐变颜色（下）</view>
					<view class="col3">String</view>
					<view class="col4">--</view>
					<view class="col5">#94db98</view>
				</view>
			</view>
			
			<view slot="callFuncDetail">
				<view class="flexRowNoWrap param-table-row">
					<view class="col6">dateChange</view>
					<view class="col7">切换月份时触发的事件</view>
					<view class="col8">（年-月）</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col6">clickChange</view>
					<view class="col7">点击签到或者补签时触发的事件</view>
					<view class="col8">（年-月-日）</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col6">clickCancel</view>
					<view class="col7">取消签到时触发的事件</view>
					<view class="col8">（年-月-日）</view>
				</view>
			</view>
			
			<view slot="directorInfo">
				林钦鸿  2021年03月24日
			</view>
			<view slot="versionInfo">
				----v1.0 林钦鸿 2021年03月24日 完成组件基本功能
			</view>
			<view slot="projectName">
				
			</view>
			<view slot="terminalName">
				H5端、微信小程序端
			</view>
		</GlobalSlot>
	</view>
</template>
<script>
	import jkCalendar from '@/components/jk-calendar/jk-calendar.vue';
	export default {
		data() {
			return {
				dwnSrc:'jk-calendar',
				toYear: parseInt(new Date().getFullYear()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				signData: []		,//当前所选月份中，已打卡的数组
				topColor:"#9BBDFA",	//渐变颜色（上）
				belowColor:"#4E42DE",	//渐变颜色（下）
			};
		},
		components: {
			jkCalendar
		},
		created() {
			//获取当前用户当前月份的签到状态  			
			this.getData(this.toYear+"-"+this.toMonth);
		},
		methods: {
			// 子组件点击签到后，记录签到
			clickSign(day) {
				//console.log("在模版页签到了", day);
				this.signData.push(day);
				// 给后台传输签到数据
				//this.$http.postHttp("Comment/UpdateRecord", day, (res) => {//可以通过后台接口添加当前用户当日打卡记录，
				// 		//console.log(res);
				// 		//if (res!= undefined) {
				// 			uni.showToast({
				// 				title: "打卡成功"+day,
				// 				icon: 'success',
				// 				duration: 2000
				// 			});
				// 		
				// 		//}
				//  })	
			},
			//点击取消签到
			cancel(day){
				let i = this.signData.indexOf(day)
				this.signData.splice(i,1)
				
				// 给后台传输取消签到的数据
			},
	
			//获取当前用户该任务的签到数组
			// 可以拿到年和月，去后端请求对应月份的数据
			getData(val) {
				let y=val.split('-')[0];
				let m=val.split('-')[1];
				//this.$http.postHttp("Comment/GetRecord", {//可以通过后台接口去获取你的打卡数据
				// 	Year: y,
				// 	Month: m,
				// }, (res) => {
				//console.log(res);
				if (y == this.toYear && m == this.toMonth) {	//获取当前月份的签到数据
					//这是我造的假数据！！！
					let num=["2","3","6","8","12","15","23"],newSign=[],today=new Date().getDate();
					for(let i=0;i<num.length;i++){
						if(parseInt(num[i])>today){
							break;
						}
						newSign.push(y+"-"+m+"-"+num[i])
					}
					
					// 获取对应的月份已经打卡的日期数组
					// console.log(newSign);//最后传给组件的格式看这里-------------
					// ["2021-3-2", "2021-3-3", "2021-3-6", "2021-3-8", "2021-3-12", "2021-3-15"]
					
					this.signData = newSign;
				} else {
				 	this.signData = [];
					// 去后台获取该年月对应的签到数据后赋值给signData
				 }
				// })
			},
		}
	}
</script>

<style lang="scss">
</style>
